import { ALIGN_TYPE } from '@/common/const'
import { mapState, mapActions } from 'vuex'

export const middle = {
  mounted(){
    document.removeEventListener('keydown', this.onCancel)
    document.addEventListener('keydown', this.onCancel)
  },
  ...mapState("components", {
    page: state => state.currentPage,
    componentData: state => state.currentComponentData,
    siteAttrs: state => state.attrs,
    siteStatus: state => state.siteStatus,
    fileUploadData: state => state.fileUploadData,
    rightMenu: state => state.rightMenu,
  }),
  methods: {
    ...mapActions({
      alignComponents: "components/alignComponents",
      removeCurrentComponent: "components/removeCurrentComponent",
      updateSiteAttrs: "components/updateSiteAttrs",
      updateKeyDownShift: "components/updateKeyDownShift",
      updateShiftComponents: "components/updateShiftComponents",
      copyCurrentComponent: "components/copyCurrentComponent",
      isGroupCurrentComponent: "components/isGroupCurrentComponent",
      recordMousePosition: "components/recordMousePosition",
      cancelComponentAttr: "components/cancelComponentAttr",
    }),
    onTopAlign(){
      this.alignComponents(ALIGN_TYPE.top)
    },
    onBottomAlign(){
      this.alignComponents(ALIGN_TYPE.bottom)
    },
    onLeftAlign(){
      this.alignComponents(ALIGN_TYPE.left)
    },
    onRightAlign(){
      this.alignComponents(ALIGN_TYPE.right)
    },
    onHorizontalCenterAlign(){
      this.alignComponents(ALIGN_TYPE.horizontalCenterAlign)
    },
    onVerticalCenterDistribute(){
      this.alignComponents(ALIGN_TYPE.verticalCenterDistribute)
    },
    onCancel(e) {
      if(e.ctrlKey && e.keyCode == 90 || e.ctrlKey && e.shiftKey && e.keyCode == 90){
        this.cancelComponentAttr()
      }
      if(e.keyCode == 8 || e.code == 'Backspace'){
        let tag = e.target.tagName.toLowerCase() || e.originalTarget.tagName.toLowerCase()
        if(tag == "textarea" || tag == "input"){
          console.log("textarea input")
        }else{
          e.stopPropagation()
          e.preventDefault()
        }
      }else if(e.keyCode >= 112 && e.keyCode == 123 || e.keyCode == 16 || e.keyCode == 17){
        e.stopPropagation()
        e.preventDefault()
      }
    },
    onKeyDownUp() {
      let left = parseInt(this.componentData.conAttr.left)
      let top = parseInt(this.componentData.conAttr.top - 2)
      this.recordMousePosition({ left: left ? left : 0, top: top ? top : 0 });
    },
    onKeyDownDown() {
      let left = parseInt(this.componentData.conAttr.left)
      let top = parseInt(this.componentData.conAttr.top + 2)
      this.recordMousePosition({ left: left ? left : 0, top: top ? top : 0 });
    },
    onKeyDownLeft() {
      let left = parseInt(this.componentData.conAttr.left - 2)
      let top = parseInt(this.componentData.conAttr.top)
      this.recordMousePosition({ left: left ? left : 0, top: top ? top : 0 });
    },
    onKeyDownRight() {
      let left = parseInt(this.componentData.conAttr.left + 2)
      let top = parseInt(this.componentData.conAttr.top)
      this.recordMousePosition({ left: left ? left : 0, top: top ? top : 0 });
    },
    onGroupComponent(){
      this.isGroupCurrentComponent(true);
    },
    onBreakupComponent(){
      this.isGroupCurrentComponent(false);
    },
    onCopyComponent(){
      // if(this.isWbEvent){
      //   this.showAlert('请删掉复制组件事件，从新添加（事件不能被复制）')
      // }
      this.copyCurrentComponent()
    },
    onDeleteComponent(){
      this.removeCurrentComponent();
    },
    onKeyDownShift(){
      this.updateKeyDownShift(true);
      this.updateShiftComponents(true);
    },
    onKeyUpShift(){
      this.updateKeyDownShift(false);
      this.updateShiftComponents(false);
    },
    showAlert(error) {
      this.$dialog.alert({
        title: '',
        message: error,
      })
    },
  },
  beforeUnmount(){
    document.removeEventListener('keydown', this.onCancel)
  }
}
